const staff_employee_index = {
    template:`
<div>
    <div class="d-flex justify-content-between flex-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                            <h1 class="h2">Employee List</h1>
                            <div class="btn-toolbar mb-2 mb-md-0">
                                <div class="btn-group mr-2">
                                    <router-link :to="{name:'staff.event.create'}" class="btn btn-sm btn-outline-primary">Create new employee</router-link>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="employee col-3 py-3 mx" v-for="(item,index) in employees" :key="index">
                                <div class="card flex-row justify-content-start px-3 py-3">
                                    <div class="avatar mr-4">
                                        <img :src="item.photo">
                                    </div>
                                    <div>
                                        <p class="card-title h5">{{item.firstname}} {{item.lastname}}</p>
                                        <p class="card-subtitle text-secondary">{{item.email}}</p>
                                        <button class="btn btn-outline-danger btn-sm py-0" :class="(item.id === auth.id ? 'disabled':'')"  @click="delete_employee(item)">delete</button>
                                    </div>
                                    <div class="scope scope-course" >scope</div>
                                </div>
                            </div>
                        </div>
                    </div>    
    `,
    data() {
        return {
            employees:null,
            auth:store.auth.info
        };
    },
    methods:{
        get_employees() {
            ajax.get('employee').then(res =>{
                if (res.status === 200){
                    this.employees = res.data.data;
                }
            })
        },
        delete_employee(employee){
            if (employee.id === this.auth.id) return false;
            ajax.delete(`employee/${employee.id}`).then(res =>{
                if (res.status === 200){
                    this.get_employees();
                }
            })
        }
    },
    mounted(){
        this.get_employees();
    }
}